<template>
  <div class="dingdan  clear">
    <div class="outdiv biaoti">订单管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">
    <div class="outdiv">
      <div class="xiajuli">
        <!--    选择城市-->
        <el-cascader style="width: 14rem;float: left" size="small" placeholder="请选择城市" :props="provinceOptions"
          v-model="provinceOptions.lazyLoad"></el-cascader>
        <!--    手机号-->
        <el-input size="small" style="float: left;width: 13rem;margin-left: 1rem" placeholder="请输入手机号" v-model="input"
          clearable>
        </el-input>
        <!--    订单状态-->
        <el-select style="width: 150px;float: left;margin-left: 1rem" v-model="orderStateValue" placeholder="请选择订单状态"
          size="small">
          <el-option v-for="item in orderState" :key="item.order_status_id" :label="item.order_status_name"
            :value="item.order_status_id">
          </el-option>
        </el-select>
        <!--    订单类型-->
        <el-select style="width: 150px;float: left;margin-left: 1rem" v-model="orderTypeValue" placeholder="请选择订单类型"
          size="small">
          <el-option v-for="item in orderType" :key="item.order_type_id" :label="item.order_type_name"
            :value="item.order_type_id">
          </el-option>
        </el-select>
        <!--    下单日期-->
        <span class=" demonstration" style="margin-left: 10px;font-size: 12px">请选择下单日期</span>
        <el-date-picker style="margin-left: 1rem;width: 23rem" v-model="time" type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss" size="small" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

        <!--    搜索按钮-->
        <div class="rfloat">
          <el-button  type="primary" circle plain icon="el-icon-search" @click="selectOrderData()"></el-button>
          <el-tooltip content="导出订单" placement="top">
            <el-button type="danger"  circle icon="el-icon-thumb" plain @click="exportOrder"></el-button>
          </el-tooltip>

        </div>
      </div>


      <!--    表格-->
      <el-table ref="multipleTable" :data="dangqianyeTableData" tooltip-effect="light" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="订单号" prop="order_number" width="200px">
        </el-table-column>
        <el-table-column prop="order_type_name" label="订单类型" >
        </el-table-column>
        <el-table-column prop="user_name" label="客户姓名" >
        </el-table-column>
        <el-table-column prop="fee_place" label="城市" >
        </el-table-column>
        <el-table-column prop="user_phone" label="手机号" >
        </el-table-column>
        <el-table-column prop="car_license_num" label="车牌号" >
        </el-table-column>
        <el-table-column prop="pick_name" label="接车司机" >
        </el-table-column>
        <el-table-column prop="car_pickplace" label="接车地址" >
        </el-table-column>
        <el-table-column prop="order_status_name" label="订单状态" >
        </el-table-column>
        <el-table-column prop="order_time" label="下单时间" >
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <!--                订单详情-->
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-s-grid" circle plain  @click="selectOrder(scope)"></el-button>
            <!-- 订单详情弹框 -->
            <el-dialog title="订单详情" :visible.sync="dialogFormVisibleTwo" :append-to-body="true">
              <el-form :model="form">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.bianhao" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单类型" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="下单时间" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.xiadantime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接车司机" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.jiechesiji" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="换车司机" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.huanchesiji" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单状态" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.orderstate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="4S店" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.fours" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="待定事项" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.daiding" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发送邮件" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="form.sendemail" autocomplete="off"></el-input>
                  <el-button @click="sendUser(form)" style="margin-left: 80px" size="mini" type="primary">给用户发送
                  </el-button>
                  <el-button @click="sendCar()" style="margin-left: 50px" size="mini" type="primary">给司机发送</el-button>
                </el-form-item>
                <el-form-item label="接车时间" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.jiechetime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.chepaihao" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发动机号" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.fadongji" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="被保险人" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.beibaoxianren" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.lianxiren" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="定损地点" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.dingsundi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="登记人" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.dengjiren" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接车地址" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.jiechedizhi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="换车地点" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.huanchedizhi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户备注" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.kehubeizhu" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="修理部位" :label-width="formLabelWidth">
                  <div v-for="(item,index) in form.xiuli" :key="index">
                    <el-image :src="'http://106.14.247.137:8080'+item" @error="srcerr(item,index)"></el-image>
                  </div>
                  <!--                                <el-image v-for="url in form.xiuli" :key="url" :src="form.xiuli" lazy></el-image>-->
                </el-form-item>
                <el-form-item label="支付单号" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.zhifudanhao" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.zhifufangshi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付状态" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.zhifustate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单总金额" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.zongji" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="优惠券付款" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.youhuiquan" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户实付金额" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.yingfujin" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预计维修完成时间" label-width="130px">
                  <el-input disabled v-model="form.yujitime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="拍照内容" :label-width="formLabelWidth">
                  <el-input disabled v-model="form.paizhaoneirong" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片附件" :label-width="formLabelWidth">
                  <div v-for="(item,index) in form.image" :key="index">
                    <el-image :src="'http://106.14.247.137:8080'+item" @error="srcerr(item,index)"></el-image>
                  </div>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisibleTwo = false">关 闭</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <!--     分页-->
      <el-pagination :background="state" align="center" :current-page="elPage" @current-change=elChangePage
        :page-size=pageSize layout="prev,pager,next" :total="tableData.length">
      </el-pagination>
      <!--      导出订单-->
    </div>
  </div>
</template>
<script>
  import myMixin from "../../utils/mixin";
  import * as api from '../../utils/api'
  export default {
    name: 'dingdan',
    mixins: [myMixin],
    data() {
      return {
        pageSize: 4,
        value: '',
        valueTwo: '',
        valueThree: '',
        valueFour: '',
        valueFive: '',
        time: '',
        formLabelWidth: '120px',
        multipleSelection: [],
        state: true,
        input: '',
        orderState: [],
        orderStateValue: '',
        orderType: [],
        orderTypeValue: '',
        outerVisible: false,
        innerVisible: false,
        dialogFormVisible: false,
        dialogFormVisibleTwo: false,
        dialogFormVisibleThree: false,
        errobj: {},
        xiangqingData: [],
        four: [],
        jieche: [],
        card: [],
        xiuliimgUrl: [],
        imgUrl: [],
        coupon: [],
        couponPay: '',
        form: {
          bianhao: '',
          type: '',
          xiadantime: '',
          jiechesiji: '',
          huanchesiji: '',
          orderstate: '',
          fours: '',
          daiding: '',
          sendemail: '',
          jiechetime: '',
          chepaihao: '',
          fadongji: '',
          beibaoxianren: '',
          lianxiren: '',
          phone: '',
          dingsundi: '',
          dengjiren: '',
          jiechedizhi: '',
          huanchedizhi: '',
          kehubeizhu: '',
          xiuli: '',
          zhifudanhao: '',
          zhifufangshi: '',
          zhifustate: '',
          zongji: '',
          youhuiquan: '',
          yingfujin: '',
          yujitime: '',
          paizhaoneirong: '行驶证,交强保险单(并附微信),驾驶证',
          image: '',
        },
        newForm: {
          time: '',
          dingsun: '',
          beizhu: '',
          jiechedizhi: '',
          huanchedizhi: '',
          dengjiren: '',
          tedingshixiang: '',
        },
        payOrder: {
          youhuiquan: '',
          dingdanhao: '',
          dingdanzong: '',
          zhifufangshi: '',
          zhifudanhao: '',
          diyonghou: '',
          goumaishangping: '',
          yingfujiage: ''
        }
      }
    },
    methods: {
      add(num) {
        // console.log(num.row.orderamount_total);
        for (let i = 0; i < this.coupon.length; i++) {
          if (this.coupon[i].coupon_id === this.valueFive) {
            this.couponPay = this.coupon[i].price
          }
        }
        // console.log(this.couponPay);
        this.payOrder.dingdanhao = num.row.order_number;
        this.payOrder.dingdanzong = num.row.orderamount_total;
        this.payOrder.zhifufangshi = num.row.pay_method;
        this.payOrder.zhifudanhao = num.row.pay_number;
        this.payOrder.diyonghou = parseInt(num.row.orderamount_total - this.couponPay);
        this.payOrder.goumaishangping = num.row.order_type_name;
        this.payOrder.yingfujiage = parseInt(num.row.orderamount_total - this.couponPay);
      },
      handleSelectionChange(val) {
        // 表格第一列 被选中的行的数据  val
        console.log(val);
        this.multipleSelection = val;
      },
      // 查询订单状态
      getOrderStatus() {
        this.axios({
          url: api.GET_SELECT_STATETABLESTATUS,
          method: 'get',
          params: {

          }
        }).then(data => {
          this.orderState = data.data.data;
        })
      },
      // 查询订单类型
      getOrderType() {
        this.axios({
          url: api.GET_SELECT_TYPETABLEDATA,
          method: 'get',
          params: {}
        }).then(data => {
          this.orderType = data.data.data;
        })
      },
      // 订单详情动态渲染
      selectOrder(num) {
        this.dialogFormVisibleTwo = true;
        this.axios({
          url: api.POST_SELECT_CONDITIONSTABLEDATA,
          method: 'post',
          data: {
            order_number: num.row.order_number
          }
        }).then(data => {
          this.xiangqingData = data.data.data;
          // console.log(this.xiangqingData);
          this.form.bianhao = this.xiangqingData[0].order_number;
          this.form.type = this.xiangqingData[0].order_type_name;
          this.form.xiadantime = this.xiangqingData[0].order_time;
          this.form.jiechesiji = this.xiangqingData[0].pick_name;
          this.form.huanchesiji = this.xiangqingData[0].alse_name;
          this.form.orderstate = this.xiangqingData[0].order_status_name;
          this.form.fours = this.xiangqingData[0].stores_name;
          this.form.daiding = this.xiangqingData[0].specific_matters;
          this.form.sendemail = '';
          this.form.jiechetime = this.xiangqingData[0].car_picktime;
          this.form.chepaihao = this.xiangqingData[0].car_license_num;
          this.form.fadongji = this.xiangqingData[0].car_engine_no;
          this.form.beibaoxianren = this.xiangqingData[0].insure_man;
          this.form.lianxiren = this.xiangqingData[0].user_name;
          this.form.phone = this.xiangqingData[0].user_phone;
          this.form.dingsundi = this.xiangqingData[0].fee_place;
          this.form.dengjiren = this.xiangqingData[0].registrar;
          this.form.jiechedizhi = this.xiangqingData[0].car_pickplace;
          this.form.huanchedizhi = this.xiangqingData[0].car_alsoplace;
          this.form.kehubeizhu = this.xiangqingData[0].customer_remarks;
          this.form.xiuli = this.xiangqingData[0].repair_img_address;
          this.form.zhifudanhao = this.xiangqingData[0].pay_number;
          this.form.zhifufangshi = this.xiangqingData[0].pay_method;
          this.form.zhifustate = this.xiangqingData[0].pay_status_name;
          this.form.zongji = this.xiangqingData[0].orderamount_total;
          this.form.youhuiquan = this.xiangqingData[0].coupon_payment;
          this.form.yingfujin = this.xiangqingData[0].orderamount_total - this.xiangqingData[0].coupon_payment;
          this.form.yujitime = this.xiangqingData[0].expectfinish_time;
          this.form.paizhaoneirong = '行驶证,交强保险单(并附微信),驾驶证';
          this.form.image = this.xiangqingData[0].img_address;
        })
      },
      // 图片懒加载渲染
      srcerr(item, index) {
        console.log(item);
        console.log(this.form.image);
        if (/^err/.test(this.form.image[index])) {
          this.$set(this.form.image, index, this.form.image[index].slice(3))
        } else {
          if (!this.errobj[item]) {
            this.errobj[item] = 1
          } else {
            if (this.errobj[item] > 2) {
              return
            } else {
              this.errobj[item] += 1
            }
          }
          this.$set(this.form.img, index, 'err' + item)
        }
      },
      // 清除多条件框
      clearData() {
        this.provinceOptions = {};
        this.input = '';
        this.orderStateValue = '';
        this.orderTypeValue = '';
        this.time = '';
      },
      // 多条件查询
      selectOrderData() {
        let cityId = this.provinceOptions.lazyLoad[1];
        this.axios({
          url: api.POST_SELECT_CONDITIONSTABLEDATA,
          method: 'post',
          data: {
            city_id: cityId,
            user_phone: this.input,
            order_status_id: this.orderStateValue,
            order_type_id: this.orderTypeValue,
            order_time: this.time[0],
            order_time_end: this.time[1],
          }
        }).then(data => {
          // console.log(data);
          this.tableData = data.data.data;
          this.getFoodTableData({
            url: api.GET_SELECT_ALLTABLEDATA,
            data: {

            }
          });
          this.elPage = 1;
          this.clearData()
        });
      },
      // 给用户发送邮件
      sendUser() {
        this.axios({
          url: api.GET_SEND_USER,
          method: 'get',
          params: {
            content: this.form.sendemail,
            userEmali: this.xiangqingData[0].user_email,
          }
        }).then(data => {
          console.log(data)
        })
      },
      // 给司机发送邮件
      sendCar() {
        this.axios({
          url: api.GET_SEND_DRIVER,
          method: 'get',
          params: {
            content: this.form.sendemail,
            userEmali: this.xiangqingData[0].pick_email,
          }
        }).then(data => {
          console.log(data)
        })
      },
      // 导出订单
      exportOrder() {
        this.axios({
          url: api.POST_EXPORT_ALLTABLEDATA,
          method: 'post',
          data: {

          }
        }).then(data => {
          console.log(data);
          this.$message('导出成功');
          if (data.data.code === 200) {
            this.$message('导出成功')
          } else {
            this.$message('导出失败，请重试')
          }
        })
      },
      // 查询4S店
      select4s() {
        let areaId = this.provinceOptions.lazyLoad[2];
        this.axios({
          url: api.GET_SELECT_4S,
          method: 'get',
          params: {
            area_city_id: areaId
          }
        }).then(data => {
          this.four = data.data.data;
          console.log(this.four)
        });
        // 查询司机
        this.axios({
          url: api.GET_SELECT_DRIVERJIE,
          method: 'get',
          params: {
            area_city_id: areaId
          }
        }).then(data => {
          this.jieche = data.data.data;
          console.log(this.jieche)
        });
        this.selectCard()
      },
      // 查询车主卡
      selectCard() {
        this.axios({
          url: api.GET_SELECT_OWNERCAR,
          method: 'get',
          params: {
            userId: 1
          }
        }).then(data => {
          this.card = data.data.data;
          console.log(this.card)
        })
      },
      // 图片上传
      submitUploadTwo() {
        this.$refs.uploadTwo.submit();
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadImage(response, file, fileList) {
        this.xiuliimgUrl.push(response.data[0]);
        // console.log(this.xiuliimgUrl);
        this.$message('上传成功')
      },
      uploadImageFile(response, file, fileList) {
        this.imgUrl.push(response.data[0]);
        // console.log(this.imgUrl);
        this.$message('上传成功')
      },
      // 新增订单
      uploadData() {
        let cityId = this.provinceOptions.lazyLoad[1];
        this.axios({
          url: api.POST_ADD_ORDER,
          method: 'post',
          data: {
            storesId: this.value,
            feePlace: this.newForm.dingsun,
            customerRemarks: this.newForm.beizhu,
            orderType: this.orderTypeValue,
            cityId: cityId,
            carPickdriver: this.valueTwo,
            carPicktime: this.newForm.time.toString(),
            carAlsodriver: this.valueThree,
            carPickplace: this.newForm.jiechedizhi,
            carAlsoplace: this.newForm.huanchedizhi,
            registrar: this.newForm.dengjiren,
            specificMatters: this.newForm.tedingshixiang,
            ownerCardId: this.valueFour,
            repair_img_address: this.xiuliimgUrl,
            img_address: this.imgUrl
          }
        }).then(data => {
          // console.log(data);
          this.getFoodTableData({
            url: api.GET_SELECT_ALLTABLEDATA,
            data: {

            }
          });
          this.$message('添加成功');
          this.dialogFormVisibleThree = false;
        })
      },
    },
    created() {
      this.getFoodTableData({
        url: api.GET_SELECT_ALLTABLEDATA,
        data: {

        }
      });
      this.getOrderStatus();
      this.getOrderType();
    }
  }
</script>

<style lang="less" scoped>
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
  /deep/.el-table--border th.gutter:last-of-type {
    display: block !important;
    width: 17px !important;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    font-size: 1.4rem;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    // text-align: center;
    padding: 0;
    height: 40px;
    font-size: 1.2rem;
  }
  .el-pagination{
    margin-top: 2rem;
  }
</style>